<template>
  <view class="fm-order-modal" :hidden="!_visible">
    <view @click="handleVisible" class="fm-order-modal__mask" :class="_visible ? 'show' : ''"></view>
    <view class="fm-order-modal__main">
      <view class="fm-order-modal__hd">商品名称商品名称</view>
      <view class="fm-order-modal__bd">
        <fm-sku
          v-for="(item,index) in tree"
          :key="item.k_s"
          :sku-key-str="item.k_s"
          v-model="sku[index]"
          :options="item.v"
          :title="item.k"
        >
        </fm-sku>
      </view>
      <view class="fm-order-modal__ft">
        <fm-price :price="price" :font-size="20" currency></fm-price>
        <fm-button @click="handleAddCart" size="s" pill inline noShadow icon="icon-cart-plus" iconSize="14px" text="加入购物车" type="primary" v-if="number === 0"></fm-button>
        <fm-quantity v-model="number" v-else></fm-quantity>
      </view>
    </view>

    <view class="fm-order-modal__close">
      <fm-icon icon="icon-close" size="36px"></fm-icon>
    </view>
  </view>
</template>

<script>
import FmPrice from '@/components/FmPrice'
import FmQuantity from '@/components/FmQuantity'
import FmIcon from '@/components/FmIcon'
import FmSku from '@/components/FmSku'
import FmButton from '@/components/FmButton'
export default {
  name: 'OrderModal',
  components: {
    FmPrice,
    FmQuantity,
    FmIcon,
    FmSku,
    FmButton
  },
  model: {
    prop: 'visible',
    event: 'toggle'
  },
  props: {
    visible: Boolean,
    good: Object
  },
  data () {
    return {
      number: 0,
      price: 2400,
      sku: [],
      tree: [],
      list: [],
      selectedSkuComb: {
        s1: '',
        s2: '',
        s3: ''
      }
    }
  },
  computed: {
    _visible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('toggle', val)
      }
    }
  },
  methods: {
    handleVisible () {
      const visible = this._visible
      this._visible = !visible
    },
    handleAddCart () {
      const number = this.number
      this.number = number + 1
    },
    mockOptions () {
      let tree = [
        {
          k: '规格',
          v: [
            { id: '1', name: '超大杯' },
            { id: '2', name: '大杯' },
            { id: '3', name: '中杯' },
            { id: '4', name: '小杯' }
          ],
          k_s: 's1'
        },
        {
          k: '温度',
          v: [
            { id: '1', name: '热饮' },
            { id: '2', name: '冰饮' }
          ],
          k_s: 's2'
        },
        {
          k: '调味',
          v: [
            { id: '1', name: '原味' },
            { id: '2', name: '加糖' },
            { id: '3', name: '加奶' },
            { id: '4', name: '去冰' },
            { id: '5', name: '特浓' }
          ],
          k_s: 's3'
        }
      ]
      this.tree = tree
    }
  },
  mounted () {
    this.mockOptions()
  }
}
</script>

<style lang="less">
@import "../../asset/style/_variable.less";

.fm-order-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-flow: row wrap;
  align-content: center;
  justify-content: center;
  z-index: @zindex-modal-background;
  overflow: hidden;
}

.fm-order-modal__mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: @--color-black;
  opacity: 0;
  transition: @--all-transition;//@--fade-transition;
  z-index: @zindex-modal-background;
  overflow: hidden;

  &.show {
    opacity: .5;
  }
}

.fm-order-modal__main {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 24px;
  background-color: @--fill-base;
  z-index: @zindex-modal;
  border-radius: @--border-radius-base;
  box-shadow: @--box-shadow-dark;
  overflow: hidden;
}

.fm-order-modal__hd {
  position: relative;
  text-align: center;
  padding: 12px 24px;
  font-weight: @--font-weight-blod;
  font-size: @--font-size-root;

  &::after {
    .setBottomLine(@--border-color-lighter);
  }
}

.fm-order-modal__bd {
  padding: 16px 24px;
  max-height: 40vh;
  font-size: @--font-size-large;
  overflow-y: scroll;
}

.fm-order-modal__ft {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 24px;
  background-color: @--background-color-base;

  &::before {
    .setTapColor(@--border-color-lighter);
  }
}

.fm-order-modal__close {
  width: 100%;
  text-align: center;
  margin-top: 8px;
  pointer-events: none;
  color: @--fill-base;
  overflow: hidden;
  z-index: @zindex-modal;
}
</style>
